<template>
	<a-modal v-model="showModal" @ok="confirmOk" @cancel="cancel" :title="titles" width="70%">
		<a-spin :spinning="loading">
			<a-table :columns="columns" :data-source="data" :row-selection="rowSelection"
				 >
         <template #price='price, data'>
           {{data.price/100}}
         </template>
         </a-table>
		</a-spin>
	</a-modal>
</template>
<script>
	import {
		getSimple
	} from '@/api/newPet'
	export default {
		data() {
			return {
				loading: false,
				showModal: false,
				titles: '商品列表',
				data: [],
				columns: [{
						title: '商品ID',
						dataIndex: 'id',
						align: 'center',
						scopedSlots: {
							customRender: 'id'
						}
					},
					{
						title: '商品名称',
						dataIndex: 'name',
						align: 'center',
						scopedSlots: {
							customRender: 'name'
						}
					},
					{
						title: '商品价格',
						dataIndex: 'price',
						align: 'center',
						scopedSlots: {
							customRender: 'price'
						}
					},

				],
				goods: {},

				rowSelection: {
					type: 'radio',
					onChange: (selectedRowKeys, selectedRows) => {
						// console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
					},
					onSelect: (record, selected, selectedRows) => {
						// console.log(record, selected, selectedRows)
						this.goods = record;
					},
					onSelectAll: (selected, selectedRows, changeRows) => {
						// console.log(selected, selectedRows, changeRows)
					}
				}
			}
		},
		methods: {
			open() {
				this.showModal = true
			},
			confirmOk() {
				this.$emit('choose', this.goods)
				this.showModal = false

			},
			get_data() {
				this.loading = true;
				getSimple().then(res => {
					this.data = res;
				}).finally(() => (this.loading = false))
			}
		},
		created() {
			this.get_data()
		}
	}
</script>